<template>
  <div id="app">
    <keep-alive>
      <transition name="tab_router_view">
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </transition>
    </keep-alive>
     <transition name="tab_router_view">
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </transition>
  </div>
</template>

<script>
import Cookies from "js-cookie";

export default {
  name: "APP",
  mounted() {
    document.getElementById("app").style.height =
      document.documentElement.clientHeight + "px";
    window.onresize = () => {
      document.getElementById("app").style.height =
        document.documentElement.clientHeight + "px";
    };
    window.addEventListener("beforeunload", function() {
      this.signOut();
    });
  },
  methods: {
    signOut() {
      Cookies.remove(process.env.COOKIE_NAME + "_companyName");
      Cookies.remove(process.env.COOKIE_NAME + "_isFirstLogin");
      Cookies.remove(process.env.COOKIE_NAME + "_isShop");
      Cookies.remove(process.env.COOKIE_NAME + "_linkName");
      Cookies.remove(process.env.COOKIE_NAME + "_merchantId");
      Cookies.remove(process.env.COOKIE_NAME + "_token");
      Cookies.remove(process.env.COOKIE_NAME + "_userInfo");
      Cookies.remove(process.env.COOKIE_NAME + "_isOwnAuth");
      Cookies.remove(process.env.COOKIE_NAME + "_businessScope");
    }
  }
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
body,
html {
  min-height: 100%;
}
#app {
  font-family: "MicrosoftYaHei";
  /* text-align: center; */
  color: #2c3e50;
  min-height: 100%;
}
.tab_router_view-enter-active,
.tab_router_view-leave-active {
  transition: opacity 0.8s;
}

.tab_router_view-enter,
.tab_router_view-leave-to {
  opacity: 0;
}

.tab_router_view-enter-to,
.tab_router_view-leave {
  opacity: 1;
}
</style>
